<template>
  <div class="xiaomengshu"><Bb/>
    <div class="top">
      <div class="t1">
        <div class="tt">
          <span>狗狗</span>
        </div>
        <div class="in">
          <!-- <input type="text" placeholder="风趣"> -->
          <span>风趣</span>
        </div>
        <div class="right">
          <img src="h/j.png"/>
          <img src="h/x.png"/>
        </div>
      </div>
      <div class="juedui">
        <div class="img">
          <img src="h/tt.png" />
        </div>
        <div class="rig">
          <p>添加宠物</p>
          <p>定制宠物干货</p>
        </div>
      </div>
    </div>
  <div class="list">
   
    <div class="item">
        <img src="h/item1.png"/>    
        
    </div>
    <div class="item">
        <img src="h/item1.png"/>    
        
    </div>
    <div class="item">
        <img src="h/item1.png"/>    
        
    </div>
    <div class="item">
        <img src="h/item1.png"/>    
        
    </div><div class="item">
        <img src="h/item1.png"/>    
        
    </div><div class="item">
        <img src="h/item1.png"/>    
        
    </div><div class="item">
        <img src="h/item1.png"/>    
        
    </div><div class="item">
        <img src="h/item1.png"/>    
        
    </div>
  </div>
  <div class="lunbo">
    <img src="h/b.jpg"/>

  </div>
  <ul class="erjiluyou">
      <li>推荐阅读</li>
      <li>推荐阅读</li>
      <li>推荐阅读</li>

      <li>推荐阅读</li>
      <li>推荐阅读</li>

      <li>推荐阅读</li>
      <li>推荐阅读</li><li>推荐阅读</li>
      <li>推荐阅读</li><li>推荐阅读</li>
  </ul>

  <div class="jiqiao">
    <div class="jiaoiaa"> <img src="h/jqq.jpg" />
    <p>狗狗骗吃骗喝必备的卖萌小技能！</p>
    <div class="bar">
      <img src="h/x.jpg"/>
      <span>执爪宠物...</span>
      <span>7w</span>
    </div>
    </div>
   <div class="jiaoiaa"> <img src="h/jqq.jpg" />
    <p>狗狗骗吃骗喝必备的卖萌小技能！</p>
    <div class="bar">
      <img src="h/x.jpg"/>
      <span>执爪宠物...</span>
      <span>7w</span>
    </div>
    </div>
    <div class="jiaoiaa"> <img src="h/jqq.jpg" />
    <p>狗狗骗吃骗喝必备的卖萌小技能！</p>
    <div class="bar">
      <img src="h/x.jpg"/>
      <span>执爪宠物...</span>
      <span>7w</span>
    </div>
    </div>
    <div class="jiaoiaa"> <img src="h/jqq.jpg" />
    <p>狗狗骗吃骗喝必备的卖萌小技能！</p>
    <div class="bar">
      <img src="h/x.jpg"/>
      <span>执爪宠物...</span>
      <span>7w</span>
    </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.xiaomengshu{
  width: 100%;
  .top{
    height:1.56rem;
    background-image: url(../../public/h/tbg.png);
    background-size: 100% 100%;
    width: 100%;
    position: relative;
    .t1{
      height: .5rem;
      padding: .05rem;
      padding-top: .1rem;
      // float: left;
    }
    .tt{
      float: left;
    }
    .in{
      padding-top: .01rem;
      float: left;
     width: 2.23rem;
      margin-left:.2rem;
      padding: 0 .15rem;
      height: .3rem;
      line-height: .3rem;
      border-radius: .2rem;
      background-color: rgba(240,240,240,1);
       
    }
    .right{
      float: right;
      img{
        width: .22rem;
        height: .22rem;
        margin-right: .1rem;
        margin-top: .05rem;
      }
    }
    .juedui{
      width: 3.35rem;
      position: absolute;
      background-color: #fff;
      padding: .1rem .2rem;
      bottom: .1rem;
      height: .86rem;
      // left: .1rem;
      box-shadow: 0 0 10px -3px #d7d7d7;
      left: .2rem;
      border-radius: .2rem;
      .img{
        float: left;
        img{
          width: .56rem;
          height: .56rem;
        }
      }
      .rig{
        float: left;
        width: 2rem;
        height: .56rem;
        margin-left: .1rem;
        font-size: .12rem;
        color:#666 ;
        margin-top: .05rem;
        p:nth-child(1){
          font-weight: bold;
          font-size: .15rem;
          color: #333;
          margin-bottom: .05rem;
        }
      }
    }
  }
  .list{
    width: 100%;
    padding: .1rem;
    flex-wrap: wrap;
    display: flex;
    .item{
      // flex: 1;
      width: .88rem;
      height: .56rem;
      
      img{
        width: .4941rem;
        height: .56rem;
        display: block;
        margin: auto;
      }
    }
  }
      .lunbo{
    width: 100%;
    // background-color: aquamarine;
  // height: .2rem;
  padding: .1rem;
  border-radius: .2rem;
  img{
    width: 100%;
      border-radius: .1rem;

  }
  }
  ul{
    // width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    height: .44rem;
    font-size: .14rem;
  
    // width: 20rem;
    // display: flex;
    // background-color: beige;
    li{
      // overflow: auto;
      // float: left;
      // background-color: aquamarine;
      width: .825rem;
      padding: .1rem;
      height: 100%;
      display: inline-block;
    }
  
  }
  .jiqiao{
    width: 100%;
    flex-wrap: wrap;
    display: flex;

    .jiaoiaa{
      width: 50%;
      padding-left: .1rem;
      img{
        width: 100%;
        
      }
      p{
        padding: .1rem;
      }
      .bar{
        height: .4717rem;
        width: 100%;
        padding: 0 .15rem;
        // line-height: .4717rem;
        font-size: .13rem;
        img{
          width: .25rem;
          display: block;
          float: left;
          height: .25rem;margin-top: .1rem;
          margin-right: .1rem;
        }
        span{
          display: block;
          height: .4717rem;
          line-height: .4717rem;
        }
        span:nth-child(1){
          float: left;
          margin-right: .1rem;
        }
        span:nth-child(2){
          float: right;
          margin-right: .1rem;
        }
      }
    }
  }
}

</style>